<style lang="less">
  .ue-truck-bellwether {
    .search-bar{
      height: 90px;
    }
    .ue-dialog-edit{
      .item-width{
        width: 80%;
      }
    }
  }
</style>
<!--精品线路列表-->
<template>
  <section class="ue-truck-bellwether">
    <!--工具条-->
    <search-bar class="search-bar">
      <el-row>
        <el-col :span="8">
          <el-form-item label="账户名称">
            <el-input v-model="searchCondition.LIKE_account"
                      placeholder="请输入账户名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="真实姓名">
            <el-input v-model="searchCondition.LIKE_realName"
                      placeholder="请输入真实姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系手机">
            <el-input v-model="searchCondition.LIKE_phone"
                      placeholder="请输入联系手机"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="企业名称">
            <el-input v-model="searchCondition.LIKE_companyName"
                      placeholder="请输入企业名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建日期">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              align="right"
              placeholder="选择日期范围">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="启用状态">
            <el-select v-model="searchCondition.EQ_status" placeholder="请选择启用状态">
              <el-option v-for="item in $store.getters.INDICATOR"
                         :key="item.dictVal"
                         :label="item.cnDictValname  == '是'? '已启用':'未启用'"
                         :value="item.dictVal"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </search-bar>
    <!-- 操作 -->
    <el-col :span="24" style="margin-bottom: 10px">
      <el-button type="primary" @click="dialogTruckBellwether(null,'new')">新增</el-button>
      <el-button type="primary" @click="resetSearchCondition" style="float: right">重置</el-button>
      <el-button type="primary" @click="searchTableList" style="float: right">查询</el-button>
    </el-col>
    <!--列表-->
    <el-table :data="tableData" highlight-current-row border @sort-change="sortChange" max-height="660" he
              @selection-change="selsChange" v-loading="listLoading" style="width: 100%;">
      <el-table-column type="index" label="序号" width="50" align="center">
      </el-table-column>
      <el-table-column prop="createdDate" label="创建日期" width="120" sortable align="center">
        <template slot-scope="scope">
          <label v-if="scope.row.createdDate != null">
            {{scope.row.createdDate.toString().substring(0, 10)}}
          </label>
        </template>
      </el-table-column>
      <el-table-column prop="account" label="账户名称" width="150" sortable align="center">
      </el-table-column>
      <el-table-column prop="realName" label="真实姓名" width="100" sortable align="center">
      </el-table-column>
      <el-table-column prop="phone" label="联系手机" width="150" sortable align="center">
      </el-table-column>
      <!--<el-table-column prop="status" label="认证状态" width="80" align="center">-->
      <!--<template slot-scope="scope">-->
      <!--<label v-if="scope.row.status === 111002001">已认证</label>-->
      <!--<label v-if="scope.row.status === 111002002">未认证</label>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <el-table-column prop="status" label="启用状态" width="80" align="center">
        <template slot-scope="scope">
          <label v-if="scope.row.status === 111002001">已启用</label>
          <label v-if="scope.row.status === 111002002">未启用</label>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="companyName" label="企业名称" width="200" header-align="center">
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="street" label="通讯地址" width="250">
        <template slot-scope="scope">
          {{scope.row.province}}{{scope.row.city}}{{scope.row.county}}{{scope.row.town}}{{scope.row.street}}
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="remark" label="备注" min-width="200" header-align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="300" align="center">
        <template slot-scope="scope">
          <el-button type="success" style="margin-left: 5px;" v-if="scope.row.status === 111002002"
                     @click="btnStartUsing(scope.row.id,scope.row)">启用
          </el-button>
          <el-button type="warning" style="margin-left: 5px;margin-top: 5px" v-if="scope.row.status === 111002001"
                     @click="btnEndUsing(scope.row.id, scope.row)">禁用
          </el-button>
          <el-button type="primary" style="margin-left: 5px;margin-top: 5px"
                     @click="toTruckBellwetherManagePage(scope.row.id)">账户设置
          </el-button>
          <!--<el-button type="danger" style="margin-left: 5px;margin-top: 5px"-->
                     <!--@click="btnDelete(scope.row.id)">删除-->
          <!--</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,sizes,prev, pager, next, jumper"
        :total="total" style="float: right">
      </el-pagination>
    </el-col>
    <!--新增领头羊账户 -->
    <el-dialog title="创建领头羊账号" width="30%" :visible.sync="dialogVisibleBellwether"
               :close-on-click-modal="false" @close="resetInfoForm" class="ue-dialog-edit">
      <el-form :key="dialogKeyBellwether" :model="objInfo" :rules="objInfoRules" label-width="120px" ref="objInfo">
        <el-form-item label="真实姓名" prop="realName">
          <el-input  v-model="objInfo.realName" placeholder="请输入领头羊真实姓名" :disabled="isView"></el-input>
        </el-form-item>
        <el-form-item label="联系手机" prop="phone">
          <el-input type="number" v-model="objInfo.phone" placeholder="请输入联系手机" :disabled="isView"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select  v-model="objInfo.sex" placeholder="请选择性别" style="width: 100%">
            <el-option v-for="item in $store.getters.MEMBER_GENDER"
                       :key="item.dictVal"
                       :label="item.cnDictValname"
                       :value="item.dictVal"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业名称">
          <el-input v-model="objInfo.companyName" placeholder="请输入企业名称" :disabled="isView"></el-input>
        </el-form-item>
        <el-form-item label="通讯地址">
          <address-select v-model="objInfo.objInfoAddressSelect" style="width: 350px"
                          placeholder="请选择省、市、区县"
                          class="dialog-form-content"></address-select>
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input v-model="objInfo.street" placeholder="请输入道路、建筑、门牌等" :disabled="isView"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click.native="resetInfoForm">关闭</el-button>
        <el-button type="primary" @click.native="handleSubmit" :loading="submitLoading" :disabled="isView">保存</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import {
  saveTruckBellwether,
  searchTruckBellwetherList,
  modifyTruckBellwetherStatus,
  deleteInfoById } from '../../../api/v3/TruckBellwether';
import { objToFilter, resetObjNull, getTreeIdAndNameToMap, getSelectObect } from '../../../lib/util';
export default {
  data () {
    return {
      // 领头羊列表
      searchCondition: {
        'LIKE_account': null,
        'LIKE_realName': null,
        'LIKE_phone': null,
        'LIKE_companyName': null,
        'GTE_createDate': null,
        'LTE_createDate': null,
        'EQ_status': null
      },
      dateRange: [], // 日期范围

      sels: [],
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      sortProp: null,
      sortOrder: 'descending',
      listLoading: false,

      // 新增领头羊
      submitLoading: false,
      dialogVisibleBellwether: false,
      dialogKeyBellwether: 0,
      objInfo: {
        'id': null,
        'account': null,
        'realName': null,
        'bindPhone': null,
        'phone': null,
        'companyName': null,
        'province': null,
        'provinceId': null,
        'city': null,
        'cityId': null,
        'county': null,
        'countyId': null,
        'town': null,
        'townId': null,
        'street': null,
        'organizationId': null,
        'bellwetherOrganizationIds': null,
        'password': null,
        'status': null,
        'email': null,
        'hasAuth': null,
        'headUrl': null,
        'payPwd': null,
        'remark': null,
        'sex': null,
        objInfoAddressSelect: []
      },
      objInfoRules: {
        realName: [
          {required: true, message: '请输入真实姓名', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入11位手机号码', trigger: 'blur'},
          {min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur'}
        ],
        email: [
          {type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change'}
        ]
      },
      isView: false
    };
  },
  methods: {
    // 启用
    btnStartUsing (id, row) {
      this.$confirm('您确认启用该领头羊?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        modifyTruckBellwetherStatus(id, 111002001).then(res => {
          this.$message('操作成功');
          row.status = 111002001;
        }).catch((res) => {
          this.$message.error(res.response.data.message);
        });
      });
    },
    // 禁用
    btnEndUsing (id, row) {
      this.$confirm('您确认禁用该领头羊?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        modifyTruckBellwetherStatus(id, 111002002).then(res => {
          this.$message('操作成功');
          row.status = 111002002;
        }).catch((res) => {
          this.$message.error(res.response.data.message);
        });
      });
    },
    // 删除
    btnDelete (id) {
      this.$confirm('您确认删除该领头羊?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        deleteInfoById(id).then(res => {
          this.$message('操作成功');
          this.searchTableList();
        }).catch((res) => {
          this.$message.error(res.response.data.message);
        });
      });
    },
    // 跳转领头羊账户信息页面
    toTruckBellwetherManagePage (id) {
      this.$router.push('/system/truck-bellwether-account-manage/' + id);
    },
    // 新增领头羊操作
    // 新增领头羊账号
    dialogTruckBellwether () {
      this.dialogVisibleBellwether = true;
    },
    // 关闭新增窗口,表单重置
    resetInfoForm () {
      this.dialogVisibleBellwether = false;
      this.dialogKeyBellwether = Math.random() - 0.5;
      for (let p in this.objInfo) {
        if (this.objInfo[p] instanceof Array) {
          this.objInfo[p] = [];
        } else {
          this.objInfo[p] = null;
        }
      };
    },
    addressValue (value) {
      if (value) {
        return value;
      } else {
        return null;
      }
    },
    // 新增数据提交
    handleSubmit () {
      // 表单验证
      this.$refs['objInfo'].validate((valid) => {
        if (valid) {
          if (this.objInfo.objInfoAddressSelect[0]) {
            if (!this.objInfo.objInfoAddressSelect[2]) {
              return this.$message.error('请选择到区县一级地址');
            } else {
              let addressMapList = getTreeIdAndNameToMap(this.objInfo.objInfoAddressSelect, this.$store.state.addressDicts);
              this.objInfo.provinceId = this.objInfo.objInfoAddressSelect[0];
              this.objInfo.province = addressMapList.get(this.objInfo.objInfoAddressSelect[0]);
              this.objInfo.cityId = this.objInfo.objInfoAddressSelect[1];
              this.objInfo.city = addressMapList.get(this.objInfo.objInfoAddressSelect[1]);
              this.objInfo.countyId = this.objInfo.objInfoAddressSelect[2];
              this.objInfo.county = addressMapList.get(this.objInfo.objInfoAddressSelect[2]);
              if (this.objInfo.objInfoAddressSelect[3]) {
                this.objInfo.townId = this.objInfo.objInfoAddressSelect[3];
                this.objInfo.town = addressMapList.get(this.objInfo.objInfoAddressSelect[3]);
              }
            };
          }
          this.objInfo.hasAuth = 111002002;// 默认未启用
          this.objInfo.status = 111002002;// 默认未启用
          this.submitLoading = true;
          this.isView = true;
          this.objInfo.account = 'lty' + this.objInfo.phone;
          this.objInfo.organizationId = this.$store.state.currentOrganizationId;
          this.objInfo.organizationName = getSelectObect(this.$store.state.currentOrganizationId, 'id', this.$store.state.organizations).name;
          this.objInfo.bellwetherOrganizationIds = this.$store.state.currentOrganizationId;// 所属机构
          this.objInfo.bellwetherOrganizationNames = getSelectObect(this.$store.state.currentOrganizationId, 'id', this.$store.state.organizations).name;
          saveTruckBellwether(this.objInfo).then((res) => {
            this.searchTableList();
            this.resetInfoForm();
          }).catch((res) => {
            this.$message.error(res.response.data.message);
          });
          this.submitLoading = false;
        } else {
          return false;
        }
      });
      this.isView = false;
    },
    // 列表相关
    // 多选操作
    selsChange (sels) {
      this.sels = sels;
    },
    // 排序操作
    sortChange (o) {
      this.sortProp = o.prop;
      this.sortOrder = o.order;
      this.searchTableList();
    },
    // 每页几条操作
    handleSizeChange (val) {
      this.pageSize = val;
      this.searchTableList();
    },
    // 第几页操作
    handleCurrentChange (val) {
      this.currentPage = val;
      this.searchTableList();
    },
    // 重置查询条件
    resetSearchCondition () {
      resetObjNull(this.searchCondition);
      this.dateRange = [];
    },
    // 查询列表执行
    loadingLists (filter = '') {
      this.listLoading = true;
      searchTruckBellwetherList({
        filters: filter,
        size: this.pageSize,
        page: this.currentPage - 1,
        sort: 'createdDate,desc'
      }).then(res => {
        this.tableData = res.data;
        this.total = Number(res.headers['x-total-count']);
        this.listLoading = false;
      });
    },
    // 查询调用
    searchTableList () {
      let filters = objToFilter(this.searchCondition);
      if (this.dateRange[0]) {
        filters += ';GTE_createdDate=' + this.dateRange[0].toJSON();
        filters += ';LTE_createdDate=' + this.$ue.addDays(this.dateRange[1], 1).toJSON();
      }
      filters += ';EQ_organizationId=' + this.$store.state.currentOrganizationId;
      this.loadingLists(filters);
    },
    // 地址数据删除为空的子地址
    clearEmptyChildren (items) {
      let o = this.clearEmptyChildren;
      items.forEach(function (v) {
        if (v.children.length === 0) {
          delete v.children;
        } else {
          o(v.children);
        }
      });
    }
  },
  mounted () {
    this.searchTableList();
    this.$store.commit('initDict');
  }
};
</script>
